<template>
    <div class="register" clearfix>
        <div class="register-wrap">
            <el-row type="flex" justify="center" style="color: blue">
                <el-form ref="form" :model="registerForm" status-icon >
                    <el-form-item label="账号">
                        <el-input v-model="registerForm.username" placeholder="请输入用户名" prefix-icon></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input show-password placeholder="请输入密码" v-model="registerForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input show-password placeholder="确认密码" v-model="password2"></el-input>
                    </el-form-item>
                    <el-form-item label="身份选择">
                        <el-radio-group v-model="registerForm.role">
                            <el-radio-button  :label=3>用户</el-radio-button>
                            <el-radio-button  :label=2>店家</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item >
                        <el-col :span="14"><el-button type="primary"   @click="doregister">注册账号</el-button></el-col>
                        <el-col :span="10"><el-button type="primary"   @click="$router.push('/login');">登录</el-button></el-col>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            registerForm:{
                username:"",
                password:"",
                role:3,
                create_time:0,
            },
            password2:"",
        }
    },
    created() {

        this.doregister();
    },
    methods:{
        doregister(){
            if (!this.registerForm.username) {
                this.$msg.error("请输入用户名！");
                return;
            } else if (!this.registerForm.password || !this.password2)  {
                this.$msg.error("请输入密码！");
                return;
            } else if(this.registerForm.password !== this.password2){
                this.$msg.error("两次密码不一致，请重新输入");
                this.registerForm.password = "";
                this.password2 = "";
            }
            else{
                this.register();
            }
        },
        register(){
            // console.log(this.registerForm.create_time);
                /// 登陆成功   提示消息，message组件
            this.registerForm.create_time = new Date().getTime();   //获取当前时间戳
            this.$ajax.post(this.$API.http+"/api/register/register", this.registerForm).then(res=> {
                    if(res.data.code == 1){
                        this.$msg.success(res.data.msg)
                        //，存入session
                    }else {
                        this.$msg.error(res.data.msg)
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        }

    }
}
</script>

<style scoped>
.register {
    width: 100%;
    height: 100%;
    background: url("../assets/images/bg1.jpg") no-repeat;
    /*background-attachment:fixed;*/
    background-size: cover;
    overflow: hidden;
    position:relative;
    color:blue;
}
.register-wrap {
    color:blue;
    background-size: cover;
    position: absolute;
    overflow: hidden;
    background: url("../assets/images/bg2.jpg") no-repeat;
    opacity: 0.9;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    line-height: 40px;
    padding: 0px  60px;
}


.el-button {
    width: 80%;
}
</style>
